/**
 * Created by zhuo on 2017/4/5.
 */

function bbs_click() {
    setPageCountAndLastPage();
    jump_page(1)
}

the_page_now = 1;
bbs_comment_count = 99999;
the_last_page = 99999;
per_comment_page = 5;

function setPageNow(pageNow) {
    the_page_now = pageNow;
}

function setPageCountAndLastPage() {
    ajaxGetPageCount();
}

function ajaxGetPageCount() {
    $.get("/getPageCount", function (pageCount) {
        // console.log('get page count -> ' + pageCount)
        bbs_comment_count = pageCount;
        var page_count = parseInt(bbs_comment_count / per_comment_page);
        if (bbs_comment_count % per_comment_page != 0)page_count++;
        the_last_page = page_count;
    })
}

function setPageCount(pageCount) {
    bbs_comment_count = pageCount;
}

function addPageCount(addPageCount) {
    bbs_comment_count += addPageCount;
}

function getPageLi(the_page) {
    if (the_page < 1)return '';
    return '<li><a href="#" onclick="jump_page(' + the_page + ')">' + the_page + '</a></li>';
}

function jump_page(the_page) {
    if (the_page < 1 || the_page > the_last_page)return;

    setPageNow(the_page);
    showBbs();

}

function appendPageButton() {
// <nav aria-label="Page navigation">
//         <ul class="pagination">
//         <li>
//         <a href="#" aria-label="Previous">
//         <span aria-hidden="true">&laquo;</span>
//     </a>
//     </li>
//     <li><a href="#">1</a></li>
//         <li><a href="#">2</a></li>
//         <li><a href="#">3</a></li>
//         <li><a href="#">4</a></li>
//         <li><a href="#">5</a></li>
//         <li>
//         <a href="#" aria-label="Next">
//         <span aria-hidden="true">&raquo;</span>
//     </a>
//     </li>
//     </ul>
//     </nav>
    var pageButtons = '<nav aria-label="Page navigation"><ul class="pagination">'

    var lis = getButtonLis();

    pageButtons += lis;

    pageButtons += '</ul></nav>';

    $('#my-content').append(pageButtons);
}

function getButtonLis() {
    var buttonList = '<li><a href="#" onclick="jump_page(' + (the_page_now - 1) + ')" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';

    // buttonList += '<li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li>';
    for (var count = the_page_now - 2; count < the_page_now; count++) {
        if (count > 0)buttonList += getPageLi(count);
    }
    buttonList += getPageLiActive(the_page_now);
    for (var count = the_page_now + 1; count < the_page_now + 3; count++) {
        if (count <= the_last_page)buttonList += getPageLi(count);
    }
    // buttonList += '<li><a>...</a> </li>'

    if (the_page_now + 2 < the_last_page) {
        buttonList += '<li><a>...</a></li>' + getPageLi(the_last_page);
    }

    buttonList += '<li><a href="#" onclick="jump_page(' + (the_page_now + 1) + ')" aria-label="Next"><span aria-hidden="true">&raquo;</span> </a> </li>';

    return buttonList;
}

function getPageLiActive(the_Page) {
    return '<li class="active"><a href="#" onclick="jump_page(' + the_Page + ')">' + the_Page + '</a></li>'
}

function showBbs() {
    getBbsTable();
    // var bbsFrame = testGetBbsTable();
}

function testGetBbsTable() {
    var bbsFrame = '';

    var header = '<div class="page-header">' +
        '<h4>为了方便大家没有设置验证码，请各位千万不要暴力刷屏哦<img src="../static/img/emoji/rilegou.jpg" th:src="img/emoji/rilegou.jpg" style="height: 35px;width: 35px"/></h4>' +
        '</div>';

    var bbs_contain = '<table class="table table-striped" id="main_table">';

    // $.get('/getComments',function (comments) {
    //
    //     $.each(comments,function (index, obj) {
    //         bbs_contain += '<tr>'+'<td><div class="panel panel-primary">'
    //             + '<div class="panel-heading">'
    //             + '<h3 class="panel-title">'+obj.name+'</h3>'
    //             +'</div>'+'<div class="panel-body">'
    //             +'<img src="'+obj.emoji+'" style="height: 35px;width: 35px"/> <span>'+obj.comment+'</span>'
    //             +'</div></div></td></tr>';
    //     })
    // })

    var comments = [
        {
            name: 'test1',
            emoji: '../static/img/emoji/huaji.jpg',
            comment: 'test1'
        }, {
            name: 'test2',
            emoji: '../static/img/emoji/rilegou.jpg',
            comment: 'test1'
        }, {
            name: 'test3',
            emoji: '../static/img/emoji/yinxian.jpg',
            comment: 'test3'
        }
    ]

    $.each(comments, function (index, obj) {
        bbs_contain += '<tr>' + '<td><div class="panel panel-primary">'
            + '<div class="panel-heading">'
            + '<h3 class="panel-title">' + obj.name + '</h3>'
            + '</div>' + '<div class="panel-body">'
            + '<img src="' + obj.emoji + '" style="height: 35px;width: 35px"/> <span>' + obj.comment + '</span>'
            + '</div></div></td></tr>';
    })

    bbs_contain += '</table>'

    // "<tr>"+'<td><div class="panel panel-primary">'
    // + '<div class="panel-heading">'
    // + '<h3 class="panel-title">'+content.name+'</h3>'
    // +'</div>'+'<div class="panel-body">'
    // +'<img src="'+content.emoji+'" style="height: 35px;width: 35px"/> <span>'+content.comment+'</span>'
    // +'</div></div></td></tr>';
    bbsFrame += header;
    bbsFrame += bbs_contain;

    return bbsFrame;
}

function getBbsTable() {
    var bbsFrame = '';

    var header = '<div class="page-header">' +
        '<h4>为了方便大家没有设置验证码，请各位千万不要暴力刷屏哦<img src="img/emoji/rilegou.jpg" style="height: 35px;width: 35px"/></h4>' +
        '</div>';

    var bbs_contain = '<table class="table table-striped" id="main_table">';
    $.get('/getComments', {page: the_page_now}, function (comments) {
        $.each(comments, function (index, obj) {
            // bbs_contain += '<tr>' + '<td><div class="panel panel-primary">'
            //     + '<div class="panel-heading">'
            //     + '<h3 class="panel-title">' + obj.name + '</h3>'
            //     + '</div>' + '<div class="panel-body">'
            //     + '<img src="' + obj.emoji + '" style="height: 35px;width: 35px"/> <span>' + obj.comment + '</span>'
            //     + '</div></div></td></tr>';
            bbs_contain += '<tr>' + '<td><div class="panel panel-primary">'
                + '<div class="panel-heading">'
                + '<h3 class="panel-title">' + obj.name + '</h3>'
                + '</div>' + '<div class="panel-body">'
                + '<img src="' + obj.emoji + '" style="height: 35px;width: 35px"/> <span>' + obj.comment + '</span>'
                + '</div></div></td></tr>';

        })
        bbs_contain += '</table>'

        bbsFrame += header;
        bbsFrame += bbs_contain;
        $('#my-content').html(bbsFrame);
        appendPostButton();
        appendPageButton();
    }, "json")

}

function appendPostButton() {
    var post_button = '<!--bbs发送框-->' +
        '<div  id="bbs_post" ><div class="pull-right"><!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">我也说一句</button>' +
        '<br/><br/></div><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document">' +
        '<div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title" id="myModalLabel">提交你的评论</h4>' +
        '</div><div class="modal-body"><form id="bbs_post_form" method="post" action="/bbsSubmit"><div class="form-group">' +
        '<label for="recipient-name" class="control-label">称呼:</label>' +
        '<input type="text" class="form-control" id="recipient-name" name="name" /></div>' +
        '<div class="form-group"><label for="message-text" class="control-label">评论:</label>' +
        '<textarea class="form-control" id="message-text" name="comment"></textarea>' +
        '</div>' +
        '<input id="emoji_input" name="emoji" value="/img/emoji/rilegou.jpg" style="display: none" />' +
        '</form></div><div class="modal-footer">' +
        '<div class="dropdown" style="display: inline">' +
        '<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">表情<span class="caret"></span> </button>' +
        '<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">' +
        '<li><a onclick="changeEmoji(1)">doge</a></li>' +
        '<li><a onclick="changeEmoji(2)">滑稽</a></li>' +
        '<li><a onclick="changeEmoji(3)">阴险</a></li>' +
        '</ul></div> ' +
        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
        '<button type="button" class="btn btn-primary" onclick="submit_bbs()">提交</button>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>';

    $('#my-content').append(post_button);
}